<template>
  <div>
    <Table border :columns="columns" :data="tableData">
      <template slot-scope="{ row, index }" slot="image">
        <img :src="row.image" style="width:80px;height:80px;" />
        <span>{{row.brand+row.type+row.color}}</span>
      </template>
      <template slot-scope="{ row, index }" slot="delete">
        <Button type="error" size="small" @click="remove(index)">Delete</Button>
      </template>
    </Table>
    <Modal v-model="modal1" title="提示" @on-ok="ok">
      <div>确认删除吗？</div>
    </Modal>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "Cart",
  data() {
    return {
      modal1: false,
      currentIndex: 0,
      columns: [
        {
          title: "商品信息",
          slot: "image",
          width: 400
        },
        {
          title: "单价",
          key: "price"
        },
        {
          title: "数量",
          key: "age"
        },
        {
          title: "Address",
          key: "address"
        },
        {
          title: "操作",
          slot: "delete"
        }
      ],
      data6: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park"
        }
      ]
    };
  },
  computed: {
    ...mapState({
      tableData: state => {
        return state.cart.products;
      }
    })
  },
  methods: {
    ...mapActions(["deleteProduct"]),
    remove(index) {
      this.modal1 = true;
      this.currentIndex = index;
    },
    ok() {
      this.deleteProduct(this.currentIndex);
    }
  }
};
</script>
<style lang="scss" scoped>

</style>
